<template>
  <el-container>
    <el-main>
      <el-cascader-panel
        ref="categoryRef"
        v-model="select.category"
        :options="select.data"
        :props="{
          multiple: modal.params.multiple,
          checkStrictly: true,
          label: 'name',
          value: 'id',
        }"
      />
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="confirm">确定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'CategorySelect',
  };
</script>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from './category.service';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: Object,
    default: {
      params: {
        multiple: false,
		topOptional:false
      },
    },
  });

  const categoryRef = ref();
  const select = reactive({
    data: [],
    category: [],
  });
  async function getData() {
    const { data } = await api.select();
    select.data = data;
    if (props.modal.params.from == 'page-category') {
      select.data.forEach((item) => {
        item?.children && delete item.children;
      });
    }
    if ((!props.modal.params.topOptional )&& (props.modal.params.from == 'coupon' || props.modal.params.from == 'page-goods') ) {
      select.data.forEach((item) => {
        item.disabled = true;
      });
    }
  }

  function confirm() {
    let list = [];
    categoryRef.value.checkedNodes.forEach((c) => {
      list.push(c.data);
    });
    emit('modalCallBack', {
      event: 'confirm',
      data: {
        ids: select.category,
        list: list,
      },
    });
  }
  onMounted(() => {
    getData();
  });
</script>
